import React, { useState, useEffect } from 'react';
import { Toast } from 'antd-mobile';
import * as api from '@/services/GatewayNewsMgr';
import styles from './index.less';
import imgURL from '../../assets/bg.png';

const initialState = {
  emptyMsg: '加载中...',
  emptyTYpe: true,
  data: [],
};
const ViewTodoListMobileApp = props => {
  const { taskId } = props.location.query; // 获取url 的taskId
  const [state, setState] = useState(initialState);

  useEffect(() => {
    setState({
      ...state,
      emptyMsg: '加载中...',
      emptyTYpe: false,
    });
    if (taskId) {
      const params = {
        instanceId: taskId,
        projectId: '',
        todoTypeCode: '',
      };
      api.getAppToDoUsingGET({ params }).then(result => {
        if (result && result.code === 1) {
          setState({
            ...state,
            emptyMsg: result.data.length <= 0 ? '暂无数据' : '',
            data: result.data,
            emptyTYpe: false,
          });
        } else {
          setState({
            ...state,
            emptyMsg: result.message,
            emptyTYpe: false,
          });
        }
      });
    } else {
      setState({
        ...state,
        emptyMsg: '加载失败',
      });
    }
  }, [taskId]);
  useEffect(() => {
    if (state.emptyMsg !== '') {
      Toast.loading(state.emptyMsg, 2, () => {});
    }
  }, [state.emptyMsg]);
  return (
    <div className={styles['xh-todo-list-see']}>
      <img className="xh-todo-list-img" src={imgURL} alt="" />
      <div className="xh-todo-list-text-content">
        <div className="xh-todo-list-text-font1">请到供销存系统PC端处理该待办</div>
        <div className="xh-todo-list-text-font2">
          {!state.emptyTYpe && state.data.length > 0 ? state.data[0].content : ''}
        </div>
      </div>
    </div>
  );
};

export default ViewTodoListMobileApp;
